<template>
  <u-dialog :title="$t('favorite.title')"
            type="none"
            v-model="display_">
    <div v-if="!favList || favList.length === 0">
      <div class="full-width text-grey text-center">{{ $t('favorite.empty') }}</div>
    </div>
    <div v-else>
      <q-list separator bordered>
        <q-slide-item v-for="item in favList"
                      :key="`${item.source}_${item.type}_${item.id}`" @right="onSlideEvent(item)">
          <template v-slot:right>
            <q-icon color="white" name="delete"/>
          </template>
          <q-item clickable
                  @click="onLoadEvent(item)">
            <q-item-section>
              <q-item-label>{{ item.artist }} - {{ item.title }}</q-item-label>
              <q-item-label caption v-if="item.source === 'bestdori' && item.type === 'official'">
                {{ $t('play.chartSource.bestdori.type.official.label') }} {{ item.id }}
              </q-item-label>
              <q-item-label caption v-else-if="item.source === 'bestdori' && item.type === 'community'">
                {{ item.author }} {{ item.id }}
              </q-item-label>
            </q-item-section>
          </q-item>
        </q-slide-item>
      </q-list>
      <div class="q-mt-md text-center">{{ $t('favorite.tip') }}</div>
    </div>
  </u-dialog>
</template>

<script>
  import UDialog from "src/components/public/UDialog";
  import notify from 'src/lib/notifyUtil'
  import * as favorite from 'src/lib/favoriteUtil';

  export default {
    name: "Favorite",
    components: {UDialog},
    data: function () {
      return {
        display_: this.display,
        favList: []
      };
    },
    props: {
      display: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      display(n) {
        this.display_ = n;
        if(n) this.favList = favorite.getList();
      },
      display_(n) {
        this.$emit('onDisplayChange', n)
      }
    },
    model: {
      prop: 'display',
      event: 'onDisplayChange'
    },
    methods: {
      onLoadEvent(item) {
        this.$root.$emit('loadByFavorite', item);
        this.display_ = false;
      },
      onSlideEvent(item) {
        if (favorite.remove(item.source, item.type, item.id)) {
          this.$root.$emit('onRemoveFavoriteEvent', {source: item.source, type: item.type, id: item.id});
          notify(this.$t('public.success'), this.$t('favorite.FAVORITE_REMOVED', {title: item.title}), 'check');
          this.favList = favorite.getList();
        } else notify(this.$t('public.failed'), this.$t('favorite.FAVORITE_REMOVE_FAILED', {title: item.title}), 'clear');
      },
      onClearEvent() {
        favorite.clear();
        notify(this.$t('favorite.FAVORITE_CLEAR'), null, 'check');
      }
    }
  }
</script>

<style scoped>

</style>
